<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6">
        <el-card>
          <div slot="header">
            <span>个人信息</span>
          </div>
          <el-form ref="userForm" :model="userForm" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item>
              <!-- <el-avatar :size="60" src="https://empty" @error="errorHandler">
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
              </el-avatar> -->

              <el-upload
                class="avatar-uploader"
                :action="fileApi"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
              >
                <el-avatar shape="square" alt="点击上传头像" :size="150" :src="userForm.avatar" />
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名称">
              {{ userForm.username }}
            </el-form-item>
            <el-form-item label="最后登录时间">
              {{ userForm.lastLoginTime }}
            </el-form-item>
            <el-form-item label="创建时间">
              {{ userForm.createTime }}
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="18">
        <el-card>
          <div slot="header">
            <span>基本资料</span>
          </div>
          <el-tabs tab-position="left">
            <el-tab-pane label="基本信息">
              <el-form ref="userForm" :model="userForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户昵称" prop="nickname" required>
                  <el-input v-model="userForm.nickname" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                  <el-input v-model="userForm.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="userForm.phone" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="用户性别">
                  <el-select v-model="userForm.sex" style="width: 100%" placeholder="请选择性别">
                    <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="用户备注">
                  <el-input v-model="userForm.remark" :rows="3" type="textarea" placeholder="请输入备注" />
                </el-form-item>
                <el-form-item>
                  <el-button @click="$router.go(-1)">返回</el-button>
                  <el-button @click="resetForm('userForm')">重置</el-button>
                  <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码">
              <UpdatePassword />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import userApi from '@/api/sys/user'
import { getInfo } from '@/api/login'
import { getToken } from '@/utils/auth'
import UpdatePassword from './update-password.vue'

export default {
  components: { UpdatePassword },
  data() {
    return {
      sexOptions: [
        { value: 0, label: '男' },
        { value: 1, label: '女' },
        { value: 2, label: '未知' }
      ],

      userForm: {
        avatar: '',
        username: '',
        nickname: '',
        email: '',
        phone: '',
        sex: 2,
        status: 0,
        remark: '',
        lastLoginTime: '',
        createTime: ''
      },
      rules: {
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式错误', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式错误',
            trigger: ['blur', 'change']
          }
        ]
      },
      fileApi: 'http://localhost'
    }
  },
  created() {
    this.getUserInfo()
    this.fileApi = process.env.VUE_APP_BASE_API + '/file/upload'
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      getInfo(getToken()).then((res) => {
        this.userForm = res.data
      })
    },

    // 提交
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          userApi.updateProfile(this.userForm).then(() => {
            this.$message.success('修改成功')
          })
        }
      })
    },

    // 重置
    resetForm(form) {
      this.$refs[form].resetFields()
      this.getUserInfo()
    },

    // 头像上传成功
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.userForm.avatar = res.data
        userApi.updateProfile(this.userForm).then(() => {
          this.$message.success('头像上传成功')
        })
      }
    },

    // 头像上传前
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 3

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG|PNG|JPEG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }

      return isJPG && isLt2M
    }
  }
}
</script>
